<template>
  <view>
    <view class="" style="padding: 28rpx" id="box1">
      <!-- 固定死的东西 -->
      <view class="flex padding-tb-sm">
        <view class="" style="padding-right: 24rpx">
          <image src="https://wenzhen.jiangkukeji360.com/static/logo.png" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
        </view>
        <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">您好，请仔细描述您的病情， 我们将会安排合适的医生为 您服务</view>
        <view class="flex-sub"></view>
      </view>
      <view class="flex padding-tb-sm">
        <view class="" style="padding-right: 24rpx">
          <image src="https://wenzhen.jiangkukeji360.com/static/logo.png" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
        </view>
        <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
          请
          <text style="color: #ff5831">新建就诊人</text>
          或
          <text style="color: #ff5831">选择就诊人</text>
        </view>
        <view class="flex-sub"></view>
      </view>
      <!-- 就诊人 -->
      <view class="" style="display: flex; margin-left: 102rpx; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-right: 30rpx" v-if="type == 0">
        <view class="btn" style="margin-top: 35rpx" @tap="creat">新建就诊人</view>
        <view class="btn1" v-for="(i, k) in parentlist" :key="k" style="margin-top: 35rpx" @tap="parnt(i)">
          {{ i.patient_name }} {{ i.patient_age }}岁 {{ i.patient_gender_text }}
        </view>
      </view>
      <view class="" v-if="withs == 0">
        <!-- 点击新建就诊人第一道题 -->
        <view class="flex padding-tb-sm" v-if="type == 1 || type == 2 || type == 3 || type == 4 || type == 5 || type == 6">
          <view class="" style="padding-right: 24rpx">
            <image src="https://wenzhen.jiangkukeji360.com/static/logo.png" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            请问就诊人
            <text style="color: #ff5831">姓名</text>
            是什么
          </view>
          <view class="flex-sub"></view>
        </view>
        <!-- 我发送的新建就诊人第一条消息 -->
        <!-- 我的发送信息 -->
        <view class="flex padding-tb-sm" v-if="type == 2 || type == 3 || type == 4 || type == 5 || type == 6">
          <view class="flex-sub"></view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            {{ name }}
          </view>
          <view class="" style="padding-left: 24rpx">
            <image :src="arvr" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
        </view>

        <!-- 点击新建就诊人第二道题   年龄-->
        <view class="flex padding-tb-sm" v-if="type == 2 || type == 3 || type == 4 || type == 5 || type == 6">
          <view class="" style="padding-right: 24rpx">
            <image src="https://wenzhen.jiangkukeji360.com/static/logo.png" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            请问就诊人的
            <text style="color: #ff5831">年龄</text>
          </view>
          <view class="flex-sub"></view>
        </view>
        <!-- 年龄用户回复 -->
        <view class="flex padding-tb-sm" v-if="type == 3 || type == 4 || type == 5 || type == 6">
          <view class="flex-sub"></view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            {{ age }}
          </view>
          <view class="" style="padding-left: 24rpx">
            <image :src="arvr" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
        </view>

        <!-- 点击新建就诊人第三道题   性别-->
        <view class="flex padding-tb-sm" v-if="type == 3 || type == 4 || type == 5 || type == 6">
          <view class="" style="padding-right: 24rpx">
            <image src="https://wenzhen.jiangkukeji360.com/static/logo.png" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            请选择就诊人的
            <text style="color: #ff5831">性别</text>
          </view>
          <view class="flex-sub"></view>
        </view>
        <!-- 性别 -->
        <view class="" style="display: flex; align-items: center; margin-left: 102rpx; margin-top: 10rpx" v-if="type == 3">
          <view class="btns" @tap="(num = 1), gender('男')">男</view>
          <view class="btns" style="margin-left: 54rpx" @tap="(num = 0), gender('女')">女</view>
        </view>
        <!-- 性别用户回复 -->
        <view class="flex padding-tb-sm" v-if="type == 4 || type == 5 || type == 6">
          <view class="flex-sub"></view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            {{ sex }}
          </view>
          <view class="" style="padding-left: 24rpx">
            <image :src="arvr" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
        </view>
      </view>

      <view class="" v-if="withs == 1">
        <!-- 咨询的症状 -->
        <view class="flex padding-tb-sm" v-if="type == 4 || type == 5 || type == 6">
          <view class="" style="padding-right: 24rpx">
            <image src="https://wenzhen.jiangkukeji360.com/static/logo.png" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            请选择您想咨询的
            <text style="color: #ff5831">症状</text>
          </view>
          <view class="flex-sub"></view>
        </view>
        <view class="" style="margin-left: 60rpx; display: flex; align-items: center; flex-wrap: wrap" v-if="type == 4">
          <view class="botton" v-for="(i, k) in hotlist" style="margin-right: 43rpx; margin-top: 30rpx" @tap="hoot(i.disease_name)">
            {{ i.disease_name }}
          </view>
        </view>

        <!-- 症状用户回复 -->
        <view class="flex padding-tb-sm" v-if="type == 5 || type == 6">
          <view class="flex-sub"></view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            {{ zheng }}
          </view>
          <view class="" style="padding-left: 24rpx">
            <image :src="arvr" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
        </view>

        <!-- 描述就诊人的症状 -->
        <view class="flex padding-tb-sm" v-if="type == 5 || type == 6">
          <view class="" style="padding-right: 24rpx">
            <image src="https://wenzhen.jiangkukeji360.com/static/logo.png" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            请选描述就诊人的
            <text style="color: #ff5831">症状</text>
          </view>
          <view class="flex-sub"></view>
        </view>
        <!-- 描述回复 -->
        <view class="flex padding-tb-sm" v-if="type == 6">
          <view class="flex-sub"></view>
          <view class="bg-white" style="max-width: 420rpx; padding: 23rpx 22rpx; border-radius: 16rpx">
            {{ shu }}
          </view>
          <view class="" style="padding-left: 24rpx">
            <image :src="arvr" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode="aspectFill"></image>
          </view>
        </view>

        <!-- 无用的 -->
        <!-- <view class="flex padding-tb-sm" v-if="type==6">
					<view class="" style="padding-right: 24rpx;">
						<image src="http://wenzhen.jiangkukeji360.com/static/logo.png" style="width: 80rpx;height: 80rpx;border-radius: 50%;"
							mode="aspectFill"></image>
					</view>
					<view class="bg-white" style="max-width: 420rpx;padding: 23rpx 22rpx;border-radius: 16rpx;">
						您对接诊医生之间和交流时长
						是否有要求
					</view>
					<view class="flex-sub"></view>
				</view> -->
      </view>
    </view>
    <view class="" style="height: 120rpx"></view>
    <view
      class=""
      style="
        position: fixed;
        width: 100%;
        height: 120rpx;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.12);
        border-radius: 20rpx 20rpx 0px 0px;
        background: #ffffff;
        bottom: 0;
        display: flex;
        align-items: center;
        padding: 28rpx;
        justify-content: space-between;
      "
      v-if="type == 1 || type == 2 || type == 5"
    >
      <view class="" style="font-size: 24rpx; text-align: center">
        <image src="https://wenzhen.jiangkukeji360.com/static/edit.png" mode="" style="width: 36rpx; height: 36rpx"></image>
        <view class="" @tap="(type = 0), (detail = [])">重填资料</view>
      </view>
      <view class="">
        <input
          type="text"
          placeholder="请输入"
          v-model="value"
          style="font-size: 28rpx; width: 450rpx; height: 76rpx; border-radius: 38rpx; background: #f5f5f5; padding-left: 39rpx"
          v-if="type != 2"
        />
        <input
          type="number"
          placeholder="请输入"
          v-model="value"
          style="font-size: 28rpx; width: 450rpx; height: 76rpx; border-radius: 38rpx; background: #f5f5f5; padding-left: 39rpx"
          v-if="type == 2"
        />
      </view>
      <view class="" style="font-size: 28rpx" @tap="send">发送</view>
    </view>
    <!-- 医生 -->
    <view class="" style="width: 100%; position: fixed; bottom: 0">
      <view
        class=""
        style="width: 100%; height: 140rpx; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 37rpx; margin-bottom: 10rpx"
        v-if="!content"
        v-for="(i, k) in list"
        :key="k"
      >
        <view class="">
          <view class="" style="font-size: 30rpx">{{ i.doctor_name }} {{ ' ' }} {{ i.title_name }}</view>
          <view class="" style="font-size: 26rpx; color: #ff621e; padding-top: 18rpx">￥{{ i.inquiry_res.price }}/{{ i.inquiry_res.video_time }}分钟</view>
        </view>
        <view
          class=""
          style="width: 140rpx; height: 60rpx; background: #1a9eff; border-radius: 30rpx; text-align: center; line-height: 60rpx; color: #fff"
          @tap="gotoback(i.inquiry_res)"
        >
          去咨询
        </view>
      </view>
      <view class="" v-if="content" style="text-align: center">
        {{ content }}
      </view>
      <!-- 咨询 -->
      <view class="" style="display: flex; align-items: center; width: 100%; height: 120rpx; background: #fff" v-if="content">
        <view class="" style="font-size: 24rpx; text-align: center; margin-left: 29rpx" @tap="(type = 0), (detail = [])">
          <image src="https://wenzhen.jiangkukeji360.com/static/edit.png" mode="" style="width: 36rpx; height: 36rpx"></image>
          <view class="">重填资料</view>
        </view>
        <view class="" style="font-size: 28rpx; margin-left: 75rpx">
          在线医生可能发生变化，
          <text style="color: #1a9eff">点此刷新</text>
        </view>
      </view>
    </view>

    <view class="" style="width: 100%"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      parentlist: [],
      type: 0,
      name: '',
      age: '',
      sex: '',
      zheng: '',
      shu: '',
      num: 0,
      hotlist: [],
      detail: [],
      withs: 0,
      list: [],
      content: null,
      prent_id: null,
      arvr: ''
    };
  },
  methods: {
    user() {
      this.api({
        url: '/api/user/index',
        method: 'post'
      }).then((res) => {
        this.arvr = res.data.avatar;
      });
    },
    gotoback(e) {
      // this.api({
      // 	url:'/api//order/create',
      // 	method:'post',
      // 	data:{
      // 		inquiry_id:e.id,
      // 		doctor_id:e.doctor_id,
      // 		type:
      // 	}
      // })
      uni.navigateTo({
        url: '/fwpay/fwpay/fwpay?id=' + e.doctor_id + '&type=' + 1
      });
    },
    hosp() {
      this.api({
        url: '/api/chat/shuntDoctor',
        method: 'post',
        data: {
          content: this.zheng
        }
      }).then((res) => {
        if (typeof res.data == 'string') {
          this.content = res.data;
        } else {
          this.list = res.data;
        }
      });
    },
    parnt(e) {
      this.type = 4;
      this.withs = 1;
      this.prent_id = e.patient_id;
    },
    bing() {
      this.api({
        url: '/api/chat/getDisease',
        method: 'post'
      }).then((res) => {
        this.hotlist = res.data;
      });
    },
    huan() {
      this.api({
        url: '/api//index/patientList',
        method: 'post'
      }).then((res) => {
        this.parentlist = res.data;
      });
    },
    // 新建就诊人
    creat() {
      this.type = 1;
    },
    gender(e) {
      this.sex = e;
      this.detail.push(this.sex);
      this.value = '';
      this.type = 4;
      this.withs = 1;
      this.api({
        url: '/api/patient/addUserPatients',
        method: 'post',
        data: {
          name: JSON.stringify(this.detail)
        }
      }).then((res) => {
        this.prent_id = res.data;
        this.api({
          url: '/api/index/setPatient',
          method: 'post',
          data: {
            patient_id: this.prent_id
          }
        }).then((res) => {});
      });
    },
    hoot(e) {
      this.zheng = e;
      this.detail.push(this.zheng);
      this.value = '';
      this.type = 5;
    },

    send() {
      if (this.value == '') {
        uni.showToast({
          title: '请先填写内容',
          icon: 'none'
        });
      } else {
        if (this.type == 1) {
          this.name = this.value;
          this.detail.push(this.name);
          this.value = '';
          this.type = 2;
        } else if (this.type == 2) {
          this.age = this.value;
          this.detail.push(this.age);
          this.value = '';
          this.type = 3;
        } else if (this.type == 5) {
          this.shu = this.value;
          this.detail.push(this.shu);
          this.value = '';
          this.hosp();
          this.type = 6;
        } else {
        }
        this.$nextTick(() => {
          const query = uni.createSelectorQuery();
          query
            .select('#box1')
            .boundingClientRect((rect) => {})
            .exec((e) => {
              console.log(e[0].bottom, '距离');
              uni.pageScrollTo({
                duration: 0,
                scrollTop: e[0].bottom
              });
            });
        });
      }
    }
    // xinjian(){
    // 	this.api({
    // 		url:''
    // 	})
    // }
  },
  onShow() {
    this.huan();
    this.bing();
    this.user();
  }
};
</script>

<style>
.btn {
  width: 230rpx;
  height: 90rpx;
  background: linear-gradient(0deg, #1a9eff 0%, #0fb8ff 100%);
  border-radius: 20rpx;
  text-align: center;
  line-height: 90rpx;
  color: #fff;
}
.btn1 {
  width: 230rpx;
  height: 90rpx;
  background: #ff7b47;
  border-radius: 20rpx;
  text-align: center;
  line-height: 90rpx;
  color: #fff;
}
.btns {
  width: 102rpx;
  height: 50rpx;
  background: #1a9eff;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  line-height: 50rpx;
}
.botton {
  width: 160rpx;
  height: 70rpx;
  background: #1a9eff;
  border-radius: 10rpx;
  text-align: center;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #fff;
}
</style>